<template>
  <div class="password-login">
    <el-row>
      <el-col :span="24"><el-input ref="username" placeholder="用户名" v-model="username"></el-input></el-col>
    </el-row>
    <el-row class="pb-margin-t10">
      <el-col :span="24">
        <div>
          <el-input placeholder="请输入密码" ref="password" v-model="password">
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row class="pb-margin-t10">
      <el-col :span="24">
        <el-button type="success" @click="login" style="width: 100%">登录{{getUsername}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {mapGetters, mapActions} from 'vuex'

  export default {
      name: 'passwordLogin',
      data: function () {
          return {
              username: '',
              password: ''
          }
      },
      computed: {
        ...mapGetters([
          'getUsername'
        ])
      },
      methods: {
          login(){
              const username= this.$refs.username.value;
              const password= this.$refs.password.value;
              if (!!password){
                this.saveUsername({username: this.username, password: this.password})
              }else {
                alert("请输入密码");
                // console.log($);
              }
              console.log(this.getUsername)
          },
          ...mapActions([
              'saveUsername'
          ])
      }
  }
</script>
<style scoped>
  .password-login{
    margin-top: 2rem;
  }
  p.pb-padding-lr10{
    color: #324057;
  }
</style>
